<template>
  <div class="bx">
    <div class="homeqiang">
        <div class="box">
            <img src="https://image2.suning.cn/uimg/cms/img/166909825089041084.gif" alt="">
            <img src="https://image2.suning.cn/uimg/cms/img/166909867404295673.gif" alt="">
            <img src="https://image3.suning.cn/uimg/cms/img/166909852801432375.gif" alt="">
        </div>
    </div>
    <div class="huiju">
        <div class="boxs">
            <div class="fist">
                <div class="img">
                    <img src="../../public/apple.jpg" alt="">
                    <span>￥5999</span>
                </div>
                    <div class="img">
                    <img src="../../public/nimen.jpg" alt="">
                <span>￥22</span>
                </div>
            </div>
            <div class="second" v-for="(item,index) in arr" :key="index">
                <div class="lefts" :style="{backgroundImage:'url('+item.bacpic+')'}" >
                    <img :src="item.pic1" alt="">
                    <span>{{item.text1}}</span>
                </div>
                <div class="lefts" :style="{backgroundImage:'url('+item.bacpic1+')'}">
                    <img :src="item.pic2" alt="">
                    <span>{{item.text2}}</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [
                { bacpic: '../../cgbc1.png', bacpic1: '../../cgbc2.png', pic1: '../../cg1.png', pic2: 'https://image3.suning.cn/uimg/cms/img/166519868618939483.png', text1: '领套购物神卷', text2: '直播红包雨' },
                { bacpic: '../../phbc1.png', bacpic1: '../../phbc2.png', pic1: '../../ph1.png', pic2: '../../ph2.gif', text1: '人气手机榜', text2: '月度礼包' },
                { bacpic: '../../ldbc1.png', bacpic1: '../../ldbc2.png', pic1: '../../ld1.png', pic2: '../../ld2.png', text1: 'iPhone4', text2: '享补贴价' },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.bx{
    .homeqiang {
            height: 1.24rem;
            width: 100%;

            .box {
                margin: 0 2.5%;

                img {
                    width: 1.18rem;
                    height: 1.2975rem;
                }
            }
        }
        .huiju {
            width: 100%;
            height: 2.19rem;
            box-sizing: border-box;
            margin-top: 0.05rem;
            .boxs{
                width: 95%;
                height: 100%;
                margin: 0 2.5%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .fist{
                    width: 48%;
                    height: 1.05rem;
                    border-radius: 0.1rem;
                    background-image: url(../../public/big.png);
                    background-size: 100%;
                    background-repeat: no-repeat;
                    display: flex;
                    justify-content: space-evenly;
                    font-size: 0.12rem;
                    .img{
                        position: relative;
                        img{
                            width: 0.77rem;
                            height: 0.7rem;
                            margin-top: 0.28rem;
                        }
                        span{
                            position: absolute;
                            top: 0.84rem;
                            left: 0.17rem;
                            color: #ff3931;
                            display: block;
                            border-radius: 0.08rem;
                            background-color: #ffebeb;
                            padding: 0 0.02rem;
                        }
                    }
                }
                .second{
                    width: 48%;
                    height: 1.05rem;
                    display: flex;
                    .lefts{
                        width: 0.86rem;
                        height: 1.055rem;
                        background-size: 100% 100%;
                        position: relative;
                        box-sizing: border-box;
                        img{
                            width: 0.68rem;
                            height: 0.68rem;
                            margin-left: 0.08rem;
                        }
                        span{
                            position: absolute;
                            display: block;
                            font-size: 0.12rem;
                            color: #B95A17;
                            left: 0.12rem;
                            top: 0.87rem;
                            border-radius: 0.09rem;
                            background-color: #fff5ec;
                            opacity: 0.8;
                            text-align: center;
                            padding: 0 0.03rem;
                        }
                    }
                }
            }
        }
}
</style>